<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">

<body>
<script th:src="@{/static/plugins/ueditor/ueditor.config.js}"></script>
<script th:src="@{/static/plugins/ueditor/ueditor.all.min.js}"></script>
<script th:src="@{/static/plugins/ueditor/lang/zh-cn/zh-cn.js}"></script>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">博物馆资料</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote" th:text="${'您选择的博物馆是：'+frontMember.name}">这个貌似不用多介绍，因为你已经在太多的地方都看到</blockquote>
                    <input type="hidden" name="bwgid" id="bwgid" th:value="${frontMember.bwgid}">

                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md9">
                            <div>
                                <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-row" style="text-align:center">
                                <img class="layui-upload-img" id="img1" style="width: 150px;height: 150px;"
                                     onerror="javascript:this.src='/static/images/userlogo0.png';"  th:src="${frontMember.picid}">
                            </div>
                            <p></p>
                            <div style="text-align:center">
                                <button type="button" style="width:150px" class="layui-btn" id="test1">修改头像</button>
                            </div>
                        </div>
                    </div>
                    <div  class="layui-row layui-col-space10">
                        <button type="button" class="layui-btn"
                                onclick="tijiao()">提交
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" style="margin: 15px;"
                                onclick="history.go(-1)">返回
                        </button>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>


<script type="text/javascript" th:inline="javascript">
    layui.config({
        base: '/static/layui/lay/modules/' //layui自定义layui组件目录
    }).use(['form', 'easyCropper','layer'], function () {
        var $ = layui.jquery
            ,form = layui.form
            ,layer = layui.layer
            ,easyCropper = layui.easyCropper;

        //创建一个头像上传组件
        easyCropper.render({
            elem: '#test1'
            , saveW: 150     //保存宽度
            , saveH: 150   //保存高度
            , mark: 1 / 1    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "/save_image?type=member&bwgid=" + [[${frontMember.bwgid}]]  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (url) { //上传完毕回调
                if(url.indexOf("Error") !== -1){
                    layer.msg('上传失败！', {icon: 2});
                }else{
                    layer.msg('上传成功！', {icon: 1});
                    $("#img1").attr('src', url);//添加随机数防止图片缓存
                }

            }
        });
    });

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    $(function () {
        var ue = UE.getEditor('editor');
        ue.addListener("ready", function () {
            //赋值
            if ([[${frontMember.introduct}]]) {
                ue.setContent([[${frontMember.introduct}]])
            }
        });
    });

    function tijiao() {
        var context = UE.getEditor('editor').getContent();
        var datas = {};
        datas["bwgid"] = $('#bwgid').val();
        datas["introduct"] = context;
        layer.confirm('确定提交？', function (index) {
            $.ajax({
                url: "/changeBwgDescribe",
                async: false,
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(datas),
                success: function (data) {
                    if (data === "success") {
                        layer.open({
                            title: '信息'
                            , content: '提交成功！'
                            , end: function () {
                                window.location.href = "/backshow?type=bwgzt";
                            }
                        });
                    } else {
                        layer.alert("提交失败", {icon: 2});
                        location.reload();
                    }
                }
            });
        })
    }

</script>
</body>
</html>